//表单配置文件
const formOpt = {
    //字段名：选择器
    username: "#username",
    password: "#pwd",
    passwordRep: "#repPwd"
}

function Form(formOpt) {
    
    const ctx = this
    //调用findElement，根据配置文件找到对应的元素并挂在到this.elements上
    this.elements = findElement(formOpt)
    this.valiRes = genValiRes(formOpt)
    bindEvent()

    /**
     * 寻找字段对应的元素
     * @param {Object} formOpt 
     */
    function findElement(formOpt) {
        const elements = {}
        //循环formOpt的键
        for (let key in formOpt) {
            //拿到字段对应的选择器，字符串
            const selector = formOpt[key]
            //根据选择器找到对应的元素，并添加给elements对象
            elements[key] = document.querySelector(selector)
        }
        return elements
    }
    /**
     * 根据字段生成表单验证结果
     * @param {Object}} formOpt 
     */
    function genValiRes(formOpt) {
        const valiRes = {}
        for (let key in formOpt) {
            valiRes[key] = false
        }
        return valiRes
    }

    /*
    function bindEvent(){
        console.log(ctx)
        console.log("---------")
        console.log(this)
        for(let key in ctx.elements){
            //拿到字段对应的元素
            const element = ctx.elements[key]
            //给元素添加change事件
            element.onchange = function(){
                console.log(this.value)
            }
        }
    }
    */
    
}

const form = new Form(formOpt)